<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <link href="/static/css/chatAI.css" rel="stylesheet">
    <title>AI Chatbot</title>
     <script src="/static/layui/layui.js"></script>
</head>
<body style="background-color: #4f5c70">
<div class="row1">
    <ul class="layui-nav layui-nav-tree layui-bg-cyan">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="/index.html" style="font-size: 22px">AI Chatbot</a>
            <dl class="layui-nav-child">
                <dd><a href="/static/index.html" style="font-size: 22px">在线聊天</a></dd>
                <dd><a href="/static/history.html" style="font-size: 22px">历史对话</a></dd>
            </dl>
        </li>
    </ul>
    <div class="column1">

        <a style="color: #fff;font-size: 40px;font-weight: bold">Chat History</a>
        <div id = "history"></div>
    </div>

</div>
</body>
</html>
   <script>
       function showhistory() {
           fetch(`/wenxinyiyan/showhistory`)
               .then(response => response.json())
               .then(data => {
                   const history = document.getElementById("history");
                   for (var i = 0; i < data.response.length; i++) {
                       const aiMessageDiv = document.createElement("div");
                       const aiMessageWrapper = document.createElement("div"); // Create a wrapper to hold both text and image
                       const aiMessageSpan = document.createElement("span");
                       let messageContent = `${data.response[i].time}<br>${data.response[i].type}: ${data.response[i].communications}`;

                       if (data.response[i].type === 'AI') {
                           aiMessageSpan.classList.add("aiMessage");
                           aiMessageDiv.classList.add("aiMessageDiv");
                           aiMessageWrapper.classList.add("aiMessageWrapper");
                       } else if (data.response[i].type === 'USER') {
                           aiMessageSpan.classList.add("userMessage");
                           aiMessageDiv.classList.add("aiMessageDiv");
                           aiMessageWrapper.classList.add("userMessageWrapper");
                       }

                       // Check if the communication contains an image link
                       if (data.response[i].communications.includes('http')) {
                           const img = document.createElement("img");
                           img.src = data.response[i].communications;
                           img.alt = 'Image description';
                           img.classList.add("ai-image");
                           img.style.maxWidth = "200px";
                           img.style.maxHeight = "200px";
                           img.style.border="2px solid #4f5c70";
                           img.style.borderRadius="10px";
                           img.style.margin="10px";
                           // Clear the text content and add only the time and type
                           messageContent = `${data.response[i].time}<br>${data.response[i].type}:`;

                           const textSpan = document.createElement("span");
                           textSpan.classList.add("aiMessage");
                           textSpan.innerHTML = messageContent;
                           aiMessageWrapper.appendChild(textSpan); // Add the text to the wrapper
                           textSpan.appendChild(img); // Add the image to the wrapper
                       } else {
                           aiMessageSpan.innerHTML = messageContent;
                       }

                       aiMessageWrapper.appendChild(aiMessageSpan);
                       aiMessageDiv.appendChild(aiMessageWrapper);
                       history.appendChild(aiMessageDiv);
                   }
               });
       }
       window.onload = showhistory;
    </script>